<template>
<div>
<header></header>
<main>
<van-nav-bar
     left-text="详情"
     left-arrow
     @click-left="onClickLeft"

/>
<div class="choose">
    <p class="btn">
        <span @click="tapW">外卖配送</span>
        <span @click="tapS">到店自取</span>
    </p>
    <p>
        <span class="address">
            <h5>{{address.address}}</h5>
            <p>{{address.receiver}}</p>
        </span>
        <van-icon name="arrow" @click="rightadd"/>
    </p>
    <p>
        <span>立即送出</span>
        <span>约20.00送达</span>
        <van-icon name="arrow" />
    </p>
    <p>
        <span>支付方式</span>
        <span>支付宝</span>
         <van-icon name="arrow" />
    </p>
</div>
<div class="product">
    <van-card
      :num="num"
      :price="detail.price"
      :desc="detail.descriptions"  
      :title="detail.name"
      :thumb="detail.coverImg"
    /> 
    <p>配送费<b>￥{{num}}</b></p>
    <p>减满活动<b>-￥{{Math.ceil(detail.price/4)}}</b></p>
    <p>小费:<b>{{detail.price*num+num-detail.price/4}}</b></p>
</div>
<van-submit-bar
  :price="100*(detail.price*num+num-detail.price/4)"
  button-text="提交订单"
  @submit="onSubmit"
/>
</main>
<div class="payment" v-if="showBoard">
    <van-password-input
  :value="value"
  info="密码为 6 位数字"
  :focused="showKeyboard"
  @focus="showKeyboard = true"
/>
<!-- 数字键盘 -->
<van-number-keyboard
  :show="showKeyboard"
  @input="onInput"
  @delete="onDelete"
  close-button-text="完成"
  @close="check()"
  @blur="showKeyboard = false"
  
/>
</div>
<van-overlay :show="overShow" @click="overShow = false" />
</div>
</template>

<script>
import * as api from '@/api/getProlist'
import * as product from '@/api/cart'
export default {
    name:'Buypro',
    data(){
        return{
            show:false,
            show_a:false,
            detail:'',
            price:65500,
            num:'',
            showBoard:false,
            overShow:false,
            showKeyboard:false,
            value:'',
            address:{address:'收货地址',receiver:'姓名(先生/女士)'},
        }
    },
    methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    onDelete() {
      this.value = this.value.slice(0, this.value.length - 1);
    },
    rightadd(){
        this.$router.push('/myaddress')
    },
    onInput(key) {
      this.value = (this.value + key).slice(0, 6);
    },
    tapW(e){
        let el = e.target
        el.nextElementSibling.className=''
        if(el.className.indexOf('active')!=-1){
            el.className = ''
        }else{
            e.target.className = 'active'
        }
    },
    tapS(e){
        let el = e.target
        el.previousElementSibling.className=''
        if(el.className.indexOf('active')!=-1){
            el.className = ''
        }else{
            e.target.className = 'active'
        }
    },
    onSubmit(){
        this.showKeyboard = true
        this.overShow = true
        this.showBoard = true
    },
    check(){
        if(this.value.length==6){
            if(this.value=='666666'){
                this.$toast('支付成功')
                this.$router.push('/orderlist')
                
            }else{
                console.log('密码输入错误')
                this.$dialog.alert({
                    message: '密码输入错误'
                });
              this.value = ''
              this.showKeyboard = true
            }
        }
    }
    },
  mounted(){
        if(this.$store.state.address.address!==undefined){
            console.log(1)
          this.address = this.$store.state.address.address
        }   
        
        this.id = this.$route.params.pid
        product.productCart().then((data)=>{
            this.num=data.data[data.data.length-1].quantity
            console.log(data.data[data.data.length-1].product)
            this.detail=data.data[data.data.length-1].product
        })

    }
}
</script>

<style scoped>
.van-password-input__security li{
    border:1px solid #eee
}
.payment{
    height:400px;
    position: fixed;
    background:#fff;
    bottom:0;
    z-index:10;
    width:100vw;
    z-index: 999;
    margin-bottom: -5px;
}
.van-password-input{
    margin:0 auto;
    left:0; right:0;
    position:absolute;
    width:90%;
}
.wrapper{
    display: flex;
    flex-direction: column;
    height:100vh;
}
main{
    overflow: auto;
    padding: 0 17px;
    margin-bottom: 70px
}
.address{
    display:block;float:left;
    width:300px;
}
main .choose{
    box-shadow: 0 0 10px rgb(230, 226, 226);
    padding:10px 10px ;
    margin-bottom: 10px
}
main .choose .btn{
    display: flex;
    padding: 0 60px
}
main .choose p:nth-of-type(1) span{
    padding:7px 12px;
    display: block;
    border-radius: 20px;
    font-size: 16px;
    color: #333;
    border:1px solid rgb(15, 143, 36)
}
main .choose p:nth-of-type(1) span:nth-of-type(2){
    color:#333;
}
main .choose p:nth-of-type(1) span:nth-of-type(1){
    margin-right: 20px
}
main .active{
    background: rgb(40, 200, 22);
    color:#fff!important;
}
main .choose p:nth-of-type(2){
    display: flex;
    margin-top: 20px;
    padding-bottom:15px;
    border-bottom: 1px solid rgb(224, 219, 219); 
}
main .choose p:nth-of-type(2) span h5{
    color:#333;
    font-size: 16px;
}
main .choose p:nth-of-type(2) span p{
    color: #666;
    font-size:14px 
}
main .choose p:nth-of-type(2) .van-icon{
    color: #666;
    font-size:20px;
    margin: 10px 0 0 0;
    
}
main .choose p:nth-of-type(3){ 
    display: flex;
    margin-top: 20px;
    padding-bottom:15px;
    border-bottom: 1px solid rgb(224, 219, 219);
}
main .choose p:nth-of-type(3) span{
    font-size: 14px;
    color: #333;
}
main .choose p:nth-of-type(3) span:nth-of-type(2){
    font-size: 12px;
    color: #666;
    margin-left: 170px
}
main .choose p:nth-of-type(3) .van-icon{
    font-size: 20px;
    color: #666;
    margin-left: 8px
}
main .choose p:nth-of-type(4){
    padding: 15px 0
} 
main .choose p:nth-of-type(4) span{
    color: #333;
    font-size: 14px;
}
 main .choose p:nth-of-type(4) span:nth-of-type(2){
     font-size: 12px;
     color: #666;
     margin-left: 190px
 }
 main .choose p:nth-of-type(4) .van-icon{
     font-size: 20px;
     color: #666;
     margin-left: 10px
 }
 main .product{
     border:1px solid  #eee;
     box-shadow: 0 0 10px rgb(211, 204, 204);
     padding: 10px 0 15px 0;
    height: 200px
 }
 main .product p{
     line-height: 25px;
     color:#666;
     font-size: 12px;
     padding: 0 15px;
    
}
main .product p:nth-of-type(1) b{
      color: rgb(255, 87, 87);
      margin-left:250px 
     
 }
main .product p:nth-of-type(2) b{
      color: rgb(255, 87, 87);
      margin-left:228px 
     
 }
 main .product p:nth-of-type(2){
      border-bottom: 1px solid #eee
 }
 main .product p:nth-of-type(3){
     float:right;
     line-height: 50px;
     font-size: 16px;
 }
  main .product p:nth-of-type(3) b{
     margin-left: 10px;
    color: rgb(255, 87, 87);
 }
</style>